<!--  -->
<template>
  <div>

    <el-card class="box-card">
  <div slot="header" class="clearfix">
   <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>内容管理</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <el-form>
      <el-form-item label="状态">
        <el-radio-group v-model="status">
          <el-radio :label="null">全部</el-radio>
          <el-radio :label="0">草稿</el-radio>
          <el-radio :label="1">待审核</el-radio>
          <el-radio :label="2">审核通过</el-radio>
          <el-radio :label="3">审核失败</el-radio>
          <el-radio :label="4">已删除</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="频道">
        <el-select v-model="Achannels" placeholder="请选择频道">
          <el-option :value="null" label="全部">全部</el-option>
          <el-option v-for="(item,index) in channels" :key="index" :value="item.id" :label="item.name"></el-option>
          
        </el-select>
      </el-form-item>
      <el-form-item label="日期">
           <el-date-picker
      v-model="date"
      formate="yyyy-MM-dd"
       value-format="yyyy-MM-dd"
       :default-time="[]"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
</el-card>
    
   <el-card class="box-card1">
  <div slot="header" class="clearfix">
    根据筛选条件共查询到{{total_count}}条结果
  </div>
  <div>
     <el-table
      :data="articles"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="封面"
        >
        <template slot-scope="scope">
        <img :src="scope.row.cover.images[0]?scope.row.cover.images[0]:require('./no-cover.gif')" alt="" class="article_img">
      </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="标题"
        >
            <template slot-scope="scope">
        <span >{{ scope.row.title }}</span>
      </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="状态">
        <template slot-scope="scope">
        <span >
          <el-button type="primary" v-if="scope.row.status===2">审核通过</el-button>
          </span>
      </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="发布时间">
        <template slot-scope="scope">
        <span >{{ scope.row.pubdate }}</span>
      </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template  slot-scope="scope">
     <el-button icon="el-icon-edit" circle @click="edit_article(scope.row.id)"></el-button>
     <el-button type="danger" icon="el-icon-delete" circle @click="deleteArt(scope.row.id)"></el-button>
      </template>
      </el-table-column>
    </el-table>

    <el-pagination
    class="page_footer"
    background
    layout="prev, pager, next"
    :total="total_count"
    :current-page.sync="page"
    @current-change="onCurrentChange">
</el-pagination>
  </div>
</el-card>
   
  </div>
</template>

<script>
import {getArticle,getChannels,deleteArticle} from '@/api/article'
export default {
  name:'article1',
  data() {
    return {
      form: {
        region: "",
        resource: "",
      },
      date: [],
      articles: [],
      total_count:null,
      page:1,
      status:null,
      channels:null,
      Achannels:null,
    };
  },
  methods:{
    getArticle(page=1){
      getArticle({
        page,
        status:this.status,
        channel_id:this.Achannels,
        begin_pubdate:this.data?this.date[0]:null,
        end_pubdate:this.data?this.date[1]:null
      }).then(res=>{
        this.total_count=res.data.data.total_count
        this.articles=res.data.data.results
 
      })
    },
    getChannels(){
      getChannels().then(res=>{
        this.channels=res.data.data.channels
      })
    },
   onCurrentChange(page){
     this.getArticle(page)
   },
   search(){
     this.getArticle()
   },
   deleteArt(id){
      this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           deleteArticle(id).then(res=>{
       
     })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
           
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })        
        })
    
   },
   edit_article(id){ 
     this.$router.push({path:'/publish',query: {id:id}})
   }
  },
  created(){
    this.getArticle()
    this.getChannels()
  }
};
</script>
<style scoped>
.box-card1{
  margin-top:50px;
}
.page_footer{
  margin-top: 20px;
}
.article_img{
  width: 80px;
  
}
</style>